<template>
	<view class="cate">
		<!-- 引入搜索框组件 -->
		<my-search @myclick='toSearch'></my-search>
		
		<view class="cate-content">
			<view class="cate-left">
				<scroll-view scroll-y="true" :style="{height: wh + 'px'}">
					<view :class="['left-scroll-item',{active:index===active}]" v-for="(item,index) in cateLists" :key="index" @click="leftHandle(index)">{{item.cat_name}}</view>
				</scroll-view>
			</view>
				<!-- 右侧 -->
			<view class="cate-right">
				<scroll-view scroll-y="true" :style="{height: wh + 'px'}" :scroll-top="scrollTop">
					<view class="right-scroll-item" v-for="(item,index) in childCateLists" :key="index">
							<!-- 标题 -->
						<view class="item-cat-name">
							<view class="catname">
								{{item.cat_name}}
							</view>
						</view>
							<!-- 内容 -->
						<view class="item-cat-content">
							<view class="itemContent-box" v-for="(i,idx) in item.children" :key="idx" @click="toGoodslists(i)">
								<image :src="i.cat_icon" ></image>
								<view class="itemContent-tit">
									{{i.cat_name}}
								</view>
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>

	</view>
</template>

<script>
	// 导入自己封装的 mixin 模块
	import badgeMixins from '../../mixins/tabbar-badge.js'
	
	export default {
		// 将 badgeMix 混入到当前的页面中进行使用
		mixins: [badgeMixins],
		data() {
			return {
				wh: 0 ,//窗口可用高度 直接调用接口
				cateLists:[],
				active:0,
				childCateLists:[],//二级分类
				scrollTop:0,//设置竖向滚动条位置  它并不是获取当前滚动条的位置
			};
		},
		onLoad() {
			this.wh = uni.getSystemInfoSync().windowHeight-50;//50是搜索栏的高度 但是不减也是能往下滑
			console.log(this.wh)
			this.getCateLists();
		},
		methods: {
			// 点击搜索组件 跳转到搜索页面
			toSearch(){
				uni.navigateTo({
					url:'../../subpkg/search/search'
				})
			},
			// 点击分类 获取cat_id跳转到goods_lists页面
			toGoodslists(i){
				console.log('i==>',i)
				uni.navigateTo({
					url:`/subpkg/goods_lists/goods_lists?cid=${i.cat_id}`
				})
			},
			// 列表左侧点击事件
			leftHandle(index){
				this.active = index;
				this.childCateLists = this.cateLists[index].children;
				this.scrollTop = this.scrollTop===0?1:0;
				
			},
			// 分类页接口请求
			async getCateLists(){
				const {data:res} = await uni.$http.get('/api/public/v1/categories')
				if(res.meta.status !== 200) return uni.$showMsg();
				this.cateLists = res.message;
				this.childCateLists =  res.message[0].children;
				console.log(this.childCateLists)
			}
		}
	}
</script>

<style lang="scss">
	.cate-content {
		display: flex;
		width: 100%;
		// view{
		// 	margin-bottom: 150rpx;
		// }
	}
	.left-scroll-item{
		background-color: #f7f7f7;
		line-height: 120rpx;
		text-align: center;
		font-size: 24rpx;
		&.active{
			background-color: #ffffff;
			position: relative;
			&::before{
				content: '';
				display: block;
				width: 6rpx;
				height: 60rpx;
				background-color: #4cc6aa;
				position: absolute;
				top: 0px;
				left: 0px;
				transform: translateY(50%);
			}
		}
	}
	.cate-left {
		width: 200rpx;
		// height: 1150rpx;

	}
	// 右侧
	.cate-right {
		// background-color: #007AFF;
		flex: 1;
		// height: 1150rpx;
		.item-cat-name{
			font-size: 24rpx;
			font-weight: bold;
			color: #333333;
			text-align: center;
			padding: 30rpx 0;
			.catname{
				padding: 10rpx;
				display:inline-block;
				border-bottom: 4rpx solid #4cc6aa;
			}
		}
		.item-cat-content{
			width: 100%;
			display: flex;
			flex-wrap: wrap;
			.itemContent-box{
				width: 33.3%;
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				margin-bottom: 20rpx;
				image{
					margin: 0 auto;
					width: 120rpx;
					height: 120rpx;
				}
				.itemContent-tit{
					font-size: 24rpx;
					text-align: center;
				}
			}
		}
	}
</style>
